<template>
	<view class="tabbar">
		<u-tabbar :value="current" @change="clickPage" :fixed="true" :placeholder="false" :safeAreaInsetBottom="true" activeColor="#165DFF">
			<u-tabbar-item :text="item.text" v-for="(item, index) in tabBarList" :key="index">
				<image class="slot-icon" slot="active-icon" :src="item.selectedIconPath"></image>
				<image class="slot-icon" slot="inactive-icon" :src="item.iconPath"></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		props: {
			address: {
				type: Number
			}
		},
		data() {
			return {
				tabClick: false, // true 表示是两次点击中的第一次点了
			}
		},
		computed: {
			tabBarList() {
				return this.$store.state.tabBarList
			},
			current() {
				return this.$store.state.current
			},
		},
		created() {
			this.$store.commit('updateCurrent', this.address)
			uni.hideTabBar({})
		},
		methods: {
			clickPage(e){
				let type = this.tabBarList[e].type
				let path = this.tabBarList[e].path
				switch (type) {
					case 'navigateTo':
						uni.reLaunch({
							url: path,
							success: () => {
								this.$store.commit('updateCurrent', e)
							}
						})
						break;
					case 'switchTab':
						uni.switchTab({
							url: path,
							success: () => {
								this.$store.commit('updateCurrent', e)
							}
						})
						break;
					case 'externalLink':
						uni.navigateToMiniProgram({
							appId: 'wx2fef303c1f4fa655',
							path: 'pages/launch/main',
							extraData: {
								'data1': 'test'
							},
							success(res) {
								that.$store.commit('updateCurrent', that.current)
							},
							complete(err) {
								that.$store.commit('updateCurrent', that.current)
							}
						})
						break;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tabbar{
		height:100rpx;
	}
	.slot-icon{
		width: 48rpx;
		height:48rpx;
	}
	.slot-icon-btn{
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		top: -80rpx;
		
	}
</style>